<template>
  <div class="members-page">
    <div class="page-header">
      <h2>会员管理</h2>
      <button @click="showAddModal = true" class="add-btn">
        <span>+</span> 添加会员
      </button>
    </div>

    <!-- 搜索和筛选 -->
    <div class="search-section">
      <div class="search-input">
        <input 
          v-model="searchKeyword" 
          placeholder="搜索会员姓名、手机号或卡号"
          class="search-field"
        />
        <button @click="searchMembers" class="search-btn">搜索</button>
      </div>
      <div class="filter-options">
        <select v-model="levelFilter" class="filter-select">
          <option value="">全部等级</option>
          <option value="普通">普通会员</option>
          <option value="VIP">VIP会员</option>
          <option value="钻石">钻石会员</option>
        </select>
        <select v-model="statusFilter" class="filter-select">
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="inactive">非活跃</option>
        </select>
      </div>
    </div>

    <!-- 会员统计 -->
    <div class="stats-section">
      <div class="stat-card">
        <div class="stat-icon">👥</div>
        <div class="stat-content">
          <div class="stat-value">{{ totalMembers }}</div>
          <div class="stat-label">总会员数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">⭐</div>
        <div class="stat-content">
          <div class="stat-value">{{ vipMembers }}</div>
          <div class="stat-label">VIP会员</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">💎</div>
        <div class="stat-content">
          <div class="stat-value">{{ diamondMembers }}</div>
          <div class="stat-label">钻石会员</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon">🎁</div>
        <div class="stat-content">
          <div class="stat-value">{{ totalPoints }}</div>
          <div class="stat-label">总积分</div>
        </div>
      </div>
    </div>

    <!-- 会员列表 -->
    <div class="members-table">
      <table>
        <thead>
          <tr>
            <th>会员信息</th>
            <th>等级</th>
            <th>积分</th>
            <th>注册时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="member in filteredMembers" :key="member.id">
            <td class="member-info">
              <div class="member-avatar">
                <img :src="member.avatar || '/default-avatar.png'" :alt="member.name" />
              </div>
              <div class="member-details">
                <div class="member-name">{{ member.name }}</div>
                <div class="member-phone">{{ member.phone }}</div>
                <div class="member-card">卡号：{{ member.cardNumber }}</div>
              </div>
            </td>
            <td>
              <span class="level-badge" :class="getLevelClass(member.level)">
                {{ member.level }}
              </span>
            </td>
            <td>
              <div class="points-info">
                <div class="points-value">{{ member.points }}</div>
                <div class="points-label">积分</div>
              </div>
            </td>
            <td>{{ formatDate(member.registerDate) }}</td>
            <td>
              <span class="status-badge" :class="member.status">
                {{ member.status === 'active' ? '活跃' : '非活跃' }}
              </span>
            </td>
            <td class="actions">
              <button @click="editMember(member)" class="edit-btn">编辑</button>
              <button @click="adjustPoints(member)" class="points-btn">积分</button>
              <button @click="deleteMember(member.id)" class="delete-btn">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑会员弹窗 -->
    <div v-if="showAddModal || showEditModal" class="modal">
      <div class="modal-content">
        <h3>{{ showEditModal ? '编辑会员' : '添加会员' }}</h3>
        <form @submit.prevent="saveMember" class="member-form">
          <div class="form-row">
            <div class="form-group">
              <label>姓名</label>
              <input v-model="editingMember.name" required class="form-input" />
            </div>
            <div class="form-group">
              <label>手机号</label>
              <input v-model="editingMember.phone" required class="form-input" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>会员卡号</label>
              <input v-model="editingMember.cardNumber" required class="form-input" />
            </div>
            <div class="form-group">
              <label>等级</label>
              <select v-model="editingMember.level" required class="form-select">
                <option value="普通">普通会员</option>
                <option value="VIP">VIP会员</option>
                <option value="钻石">钻石会员</option>
              </select>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>积分</label>
              <input 
                v-model="editingMember.points" 
                type="number" 
                required 
                class="form-input" 
              />
            </div>
            <div class="form-group">
              <label>状态</label>
              <select v-model="editingMember.status" required class="form-select">
                <option value="active">活跃</option>
                <option value="inactive">非活跃</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label>头像URL</label>
            <input v-model="editingMember.avatar" class="form-input" />
          </div>
          <div class="form-actions">
            <button type="submit" class="save-btn">保存</button>
            <button type="button" @click="closeModal" class="cancel-btn">取消</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 积分调整弹窗 -->
    <div v-if="showPointsModal" class="modal">
      <div class="modal-content">
        <h3>调整积分</h3>
        <div class="points-info">
          <p>会员：{{ selectedMember?.name }}</p>
          <p>当前积分：{{ selectedMember?.points }}</p>
        </div>
        <div class="points-adjustment">
          <label>调整积分：</label>
          <input 
            v-model="pointsAdjustment" 
            type="number" 
            class="form-input" 
            placeholder="正数为增加，负数为减少"
          />
        </div>
        <div class="form-actions">
          <button @click="confirmPointsAdjustment" class="save-btn">确认</button>
          <button @click="showPointsModal = false" class="cancel-btn">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 响应式数据
const searchKeyword = ref('')
const levelFilter = ref('')
const statusFilter = ref('')
const showAddModal = ref(false)
const showEditModal = ref(false)
const showPointsModal = ref(false)
const selectedMember = ref(null)
const pointsAdjustment = ref(0)

// 编辑中的会员数据
const editingMember = ref({
  name: '',
  phone: '',
  cardNumber: '',
  level: '普通',
  points: 0,
  status: 'active',
  avatar: ''
})

// 模拟会员数据
const members = ref([
  {
    id: 1,
    name: '张三',
    phone: '13800138001',
    cardNumber: 'M001',
    level: 'VIP',
    points: 1250,
    status: 'active',
    registerDate: '2023-01-15',
    avatar: '/avatar1.png'
  },
  {
    id: 2,
    name: '李四',
    phone: '13800138002',
    cardNumber: 'M002',
    level: '普通',
    points: 580,
    status: 'active',
    registerDate: '2023-03-20',
    avatar: '/avatar2.png'
  },
  {
    id: 3,
    name: '王五',
    phone: '13800138003',
    cardNumber: 'M003',
    level: '钻石',
    points: 2300,
    status: 'active',
    registerDate: '2022-11-10',
    avatar: '/avatar3.png'
  },
  {
    id: 4,
    name: '赵六',
    phone: '13800138004',
    cardNumber: 'M004',
    level: 'VIP',
    points: 890,
    status: 'inactive',
    registerDate: '2023-05-12',
    avatar: '/avatar4.png'
  },
  {
    id: 5,
    name: '钱七',
    phone: '13800138005',
    cardNumber: 'M005',
    level: '普通',
    points: 320,
    status: 'active',
    registerDate: '2023-07-08',
    avatar: '/avatar5.png'
  }
])

// 计算属性
const filteredMembers = computed(() => {
  let filtered = members.value

  // 关键词搜索
  if (searchKeyword.value) {
    filtered = filtered.filter(member => 
      member.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
      member.phone.includes(searchKeyword.value) ||
      member.cardNumber.toLowerCase().includes(searchKeyword.value.toLowerCase())
    )
  }

  // 等级筛选
  if (levelFilter.value) {
    filtered = filtered.filter(member => member.level === levelFilter.value)
  }

  // 状态筛选
  if (statusFilter.value) {
    filtered = filtered.filter(member => member.status === statusFilter.value)
  }

  return filtered
})

const totalMembers = computed(() => members.value.length)
const vipMembers = computed(() => members.value.filter(m => m.level === 'VIP').length)
const diamondMembers = computed(() => members.value.filter(m => m.level === '钻石').length)
const totalPoints = computed(() => members.value.reduce((sum, m) => sum + m.points, 0))

// 方法
const searchMembers = () => {
  // 搜索功能已通过计算属性实现
}

const getLevelClass = (level) => {
  switch (level) {
    case 'VIP':
      return 'vip'
    case '钻石':
      return 'diamond'
    default:
      return 'normal'
  }
}

const formatDate = (dateString) => {
  return new Date(dateString).toLocaleDateString('zh-CN')
}

const editMember = (member) => {
  editingMember.value = { ...member }
  showEditModal.value = true
}

const adjustPoints = (member) => {
  selectedMember.value = member
  pointsAdjustment.value = 0
  showPointsModal.value = true
}

const deleteMember = (memberId) => {
  if (confirm('确定要删除这个会员吗？')) {
    const index = members.value.findIndex(m => m.id === memberId)
    if (index > -1) {
      members.value.splice(index, 1)
    }
  }
}

const saveMember = () => {
  if (showEditModal.value) {
    // 编辑现有会员
    const index = members.value.findIndex(m => m.id === editingMember.value.id)
    if (index > -1) {
      members.value[index] = { ...editingMember.value }
    }
  } else {
    // 添加新会员
    const newMember = {
      ...editingMember.value,
      id: Date.now(),
      registerDate: new Date().toISOString().split('T')[0]
    }
    members.value.push(newMember)
  }
  
  closeModal()
}

const confirmPointsAdjustment = () => {
  if (selectedMember.value) {
    const index = members.value.findIndex(m => m.id === selectedMember.value.id)
    if (index > -1) {
      members.value[index].points += parseInt(pointsAdjustment.value) || 0
      if (members.value[index].points < 0) {
        members.value[index].points = 0
      }
    }
  }
  showPointsModal.value = false
}

const closeModal = () => {
  showAddModal.value = false
  showEditModal.value = false
  editingMember.value = {
    name: '',
    phone: '',
    cardNumber: '',
    level: '普通',
    points: 0,
    status: 'active',
    avatar: ''
  }
}
</script>

<style scoped>
.members-page {
  padding: 20px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-btn:hover {
  background: #337ecc;
}

.add-btn span {
  font-size: 20px;
  font-weight: bold;
}

/* 搜索和筛选 */
.search-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-input {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.search-field {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.search-field:focus {
  border-color: #409eff;
}

.search-btn {
  padding: 12px 24px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.filter-options {
  display: flex;
  gap: 16px;
}

.filter-select {
  padding: 10px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  background: white;
}

/* 统计卡片 */
.stats-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 32px;
  margin-right: 16px;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* 会员表格 */
.members-table {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 16px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

th {
  background: #fafafa;
  font-weight: 600;
  color: #303133;
  font-size: 14px;
}

.member-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.member-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #f5f7fa;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-name {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.member-phone {
  font-size: 14px;
  color: #606266;
  margin-bottom: 2px;
}

.member-card {
  font-size: 12px;
  color: #909399;
}

.level-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.level-badge.normal {
  background: #909399;
}

.level-badge.vip {
  background: #e6a23c;
}

.level-badge.diamond {
  background: #9c27b0;
}

.points-info {
  text-align: center;
}

.points-value {
  font-size: 18px;
  font-weight: 700;
  color: #409eff;
  margin-bottom: 2px;
}

.points-label {
  font-size: 12px;
  color: #909399;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.status-badge.active {
  background: #67c23a;
}

.status-badge.inactive {
  background: #f56c6c;
}

.actions {
  display: flex;
  gap: 8px;
}

.edit-btn, .points-btn, .delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.edit-btn {
  background: #409eff;
  color: white;
}

.points-btn {
  background: #67c23a;
  color: white;
}

.delete-btn {
  background: #f56c6c;
  color: white;
}

.edit-btn:hover {
  background: #337ecc;
}

.points-btn:hover {
  background: #5daf34;
}

.delete-btn:hover {
  background: #e45656;
}

/* 弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  min-width: 500px;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content h3 {
  margin: 0 0 24px 0;
  font-size: 20px;
  color: #303133;
}

.member-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.form-input, .form-select {
  padding: 12px 16px;
  border: 2px solid #e4e7ed;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.form-input:focus, .form-select:focus {
  border-color: #409eff;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.save-btn, .cancel-btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.save-btn {
  background: #409eff;
  color: white;
}

.cancel-btn {
  background: #f56c6c;
  color: white;
}

/* 积分调整弹窗 */
.points-info {
  background: #f5f7fa;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.points-info p {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #606266;
}

.points-adjustment {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.points-adjustment label {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .members-page {
    padding: 15px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .search-input {
    flex-direction: column;
  }
  
  .filter-options {
    flex-direction: column;
  }
  
  .stats-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .members-table {
    overflow-x: auto;
  }
  
  .modal-content {
    min-width: 90%;
    margin: 20px;
  }
  
  .form-row {
    grid-template-columns: 1fr;
  }
  
  .actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .stats-section {
    grid-template-columns: 1fr;
  }
}
</style> 